<template>
    <div>
        <el-upload
                action="string"
                :show-file-list="false"
                :auto-upload="false"
                :file-list="[]"
                :accept="accept"
                :on-change="onChange">
            <el-button type="primary" :icon="icon"/>
        </el-upload>
    </div>
</template>

<script lang="ts">
    import {Component, Emit, Prop, Vue} from 'vue-property-decorator'
    import $http from "@/http";

    @Component({
        name: 'UploadExcel'
    })
    export default class UploadExcel extends Vue {
        //上传请求地址
        @Prop() private url!: any;
        //上传文件按钮图标
        @Prop({default: "el-icon-upload"}) private icon!: any;
        @Prop({default: "el-icon-upload"}) private accept!: any;

        private config: any = {'Content-Type': 'multipart/form-data'};

        onChange(file: any, fileList: any) {
            let formData = new FormData();
            formData.append("files", file.raw, file.name);
            $http.post(this.url, formData, this.config).then((res: any) => {
                this.uploadStatus(res, file);
            });
        }

        @Emit("uploadStatus")
        uploadStatus(res: any, file: any) {
            return {res: res, file: file}
        }
    }
</script>
<style scoped>

    .avatar-uploader .el-upload {
        border: 1px dashed #d9d9d9;
        border-radius: 6px;
        cursor: pointer;
        position: relative;
        overflow: hidden;
    }

    .avatar-uploader .el-upload:hover {
        border-color: #409EFF;
    }

    .avatar-uploader-icon {
        font-size: 28px;
        color: #8c939d;
        width: 178px;
        height: 178px;
        line-height: 178px;
        text-align: center;
    }

    .avatar {
        width: 178px;
        height: 178px;
        display: block;
    }
</style>
